<template>
    <div>
        <button @click="show = !show">showBox</button>
    </div>
    <transition>
        <div class="box h5" v-if="show">这里是小M，现在是动画</div>
    </transition>

</template>

<script setup>
import { ref } from 'vue';


const show = ref(true)

</script>

<style lang="scss" scoped>
.box{
    width: 300px;
    height: 100px;
    background-color: rgb(234,232,216);
}
.v-enter-active{
    animation: box-end 2s linear;
}
.v-leave-active{
    animation: box-start 2s linear;
}
@keyframes box-start{
    from {
        transform: translate(0);
    }
    to{
        transform: translate(-100%);
    }
}
@keyframes box-end{
    from{
        transform: translate(-100%);
    }
    to{
        transform: translate(0);
    }
}

</style>